{% extends "base/base-sidebar.html" %}

{% block title %}Multi Seed Checker{% endblock %}

{% block head %}
	<script type="module" src="static/js/jquery.min.mjs"></script>
	<script type="module">
	$(document).ready(function(e){
		console.log("ready!")

		function get_json_data(id, parent_id) {
			console.log('#' + id)
			var html_code = '';
			$.getJSON('static/resources/groupids.json', function(data) {
				console.log(id)
				html_code += '<option value="49">Select Spawner:</option>';
				$.each(data, function(key, value) {
					console.log("Value.parent_id");
					console.log(value.parent_id);
					if (value.parent_id == parent_id) {
						html_code += '<option value="' + value.id + '">' + value.name + '</option>';
					}
				});
				$('#' + id).html(html_code);
			});
		}
		
		get_json_data('groupID',0);
	});
	</script>
{% endblock %}

{% block main %}
<section class="pla-section-results">
    <div data-pla-messages></div>
	
    <div class="tab">
		<button class="tablinks" id="defaultOpen" data-pla-tab-for="Results">Results</button>
		<button class="tablinks" data-pla-tab-for="Maps">Spawner Maps</button>
	</div>
	
	<div id="Results" class="tabcontent">
        <div class="pla-results" data-pla-results>
            Search to begin
        </div>
	</div>
	
	<div id="Maps" class="tabcontent">
		<section class="pla-section-spawnmap">
		    <h3>Currently Supported Spawnpoints:</h3>
		
			<button type="button" class="pla-button expandable-control">Obsidian Fieldlands</button>
			<div class="expandable">
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-eevee.png"></li>
				<li><img src="static/img/spawnpoint-buneary.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-shellos.png"></li>
				<li><img src="static/img/spawnpoint-abra.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-magikarp.png"></li>
				<li><img src="static/img/spawnpoint-shinx.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-buizel.png"></li>
				<li><img src="static/img/spawnpoint-geodude.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-pichu.png"></li>
				<li><img src="static/img/spawnpoint-starly.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-aipom.png"></li>
				<li><img src="static/img/spawnpoint-luxray.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-staraptor.png"></li>
				<li><img src="static/img/spawnpoint-beautifly.png"></li>
			</ul>
			</div>
			
			<button type="button" class="pla-button expandable-control">Crimson Mirelands</button>
			<div class="expandable">
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-combee.png"></li>
				<li><img src="static/img/spawnpoint-petilil.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-budew.png"></li>
				<li><img src="static/img/spawnpoint-croagunk.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-hippopotas.png"></li>
				<li><img src="static/img/spawnpoint-kricketune.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-paras.png"></li>
			</ul>
			</div>
			
			<button type="button" class="pla-button expandable-control">Cobalt Coastlands</button>
			<div class="expandable">
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-basculin.png"></li>
				<li><img src="static/img/spawnpoint-glameow.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-murkrow.png"></li>
				<li><img src="static/img/spawnpoint-qwilfish.png"></li>
			</ul>
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-tentacool.png"></li>
				<li><img src="static/img/spawnpoint-tentacool-2.png"></li>
			</ul>
			</div>
			
			<button type="button" class="pla-button expandable-control">Coronet Highlands</button>
			<div class="expandable">
			<ul class="pla-results-ul">
				<li><img src="static/img/spawnpoint-teddiursa.png"></li>
			</ul>
			</div>
			
			<button type="button" class="pla-button expandable-control">Alabaster Icelands</button>
			<div class="expandable">
                <ul class="pla-results-ul">
                    <li><img src="static/img/spawnpoint-swinub.png"></li>
					<li><img src="static/img/spawnpoint-rufflet.png"></li>
                </ul>
			</div>
		</section>
	</div>
    </section>
{% endblock %}

{% block sidebar %}
    <section class="pla-section-options">
		<div class="pla-control">
            <label for="inputseed">Seed</label>
            <input type="number" id="inputseed" placeholder="Input Seed">
        </div>
		
        <div class="pla-control">
            <label for="maxDepth">Max Number of Advances:</label>
            <select id="maxDepth">
                <option value="5">5</option>
                <option value="9">9</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
				<option value="18">18</option>
            </select>
        </div>
		
		<div class="pla-control">
			<label for="maxAlive">Number of Spawns:</label>
			<select id="maxAlive">
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
		</div>
		
		<div class="pla-control">
			<label for="groupID">Select Spawner:</label>
			<select name="groupID" id="groupID" class="form-control">
				<option value="49">Select Spawn Point</option>
			</select>
		</div>
		
		<div class="pla-control-spaced">
			<label for="nightToggle">Check Night Spawns:</label>
			<input type="checkbox" id="nightToggle">
		</div>
		
		<div class="pla-control">
			<label for="selectfilter">Select Filter:</label>
			<select id="selectfilter">
				<option value="is_shiny">Shiny Only</option>
				<option value="is_square_shiny">Square Shiny Only</option>
				<option value="is_alpha">Alpha Only</option>
				<option value="is_perfect">6IV Only</option>
				<option value="has_5ivs">5+IV Only</option>
				<option value="no_attack">0 Attack IV Only</option>
				<option value="has_no_attack_5iv_over_30">0 Attack IV, 5IV 30+ Only</option>
				<option value="has_no_attack_5iv">0 Atk, 5IV Only</option>
				<option value="no_speed">0 Speed IV Only</option>
				<option value="has_no_speed_5iv_over_30">0 Speed IV, 5 IV 30+ Only</option>
				<option value="has_no_speed_5iv">0 Speed IV, 5IV Only</option>
				<option value="has_6iv_over_30">6 IVs 30+ Only</option>
				<option value="has_5iv_over_30">5 IVs 30+ Only</option>
				<option value="has_no_speed_no_attack">0 Speed and 0 Attack IV Only</option>
				<option value="has_no_speed_no_attack_4iv_over_30">0 Speed and 0 Attack IV, 4IV 30+ Only</option>
				<option value="has_no_speed_no_attack_4iv">0 Speed and 0 Attack IV, 4IV Only</option>
			</select>
		</div>
        
        <div class="pla-control-actions">
            <button class="pla-button pla-button-action" id="pla-button-checkmultiseed">Check Multi Spawner</button>
        </div>
    </section>

	<section>
        <!--<div class="pla-control-spaced">
            <label for="mmoShinyFilter">Shiny or Alpha</label>
            <input type="checkbox" id="mmoShinyOrAlphaFilter">
        </div>-->
		

        <div class="pla-control-spaced">
            <label for="mmoShinyFilter">Filter Results: Shiny Only</label>
            <input type="checkbox" id="mmoShinyFilter">
        </div>

        <div class="pla-control-spaced">
            <label for="mmoAlphaFilter">Filter Results: Alpha Only</label>
            <input type="checkbox" id="mmoAlphaFilter">
        </div>
        
        <!--<div class="pla-control">
            <label for="mmoSpeciesFilter">Species Filter:</label>
            <input type="text" id="mmoSpeciesFilter">
        </div>-->
    </section>
{% endblock %}

{% block templates %}
    <template data-pla-results-template>
        <div class="pla-results-item" data-pla-results-template>
            <ul class="pla-results-heading pla-results-ul">
                <li class="pla-results-sprite" data-pla-results-sprite></li>
                <li class="pla-results-species" data-pla-results-species></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Shiny:</span> <span class="float -left" data-pla-results-shinysprite><span class="float -right" data-pla-results-shiny></span></span></li>
                <li><span class="pla-results-label">Alpha:</span> <span data-pla-results-alpha></span></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label"><span data-pla-results-location></span></span></li>
            </ul>
            
			<ul class="pla-results-ul">
				<li><span class="pla-results-label">Advances:</span> <span data-pla-results-adv></span></li>
			</ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">Nature:</span> <span data-pla-results-nature></span></li>
                <li><span class="pla-results-label">Gender:</span> <span data-pla-results-gender></span></li>
                <li><span class="pla-results-label">Rolls:</span> <span data-pla-results-rolls></span></li>
            </ul>

            <ul class="pla-results-ul">
                <li><span class="pla-results-label">EC:</span> <span data-pla-results-ec></span></li>
                <li><span class="pla-results-label">PID:</span> <span data-pla-results-pid></span></li>
            </ul>

            <div class="pla-results-ivs-container">
                <span class="pla-results-label">IVs:</span>
                <ul class="pla-results-ivs">
                    <li class="pla-results-ivs-hp" data-pla-results-ivs-hp></li>
                    <li class="pla-results-ivs-att" data-pla-results-ivs-att></li>
                    <li class="pla-results-ivs-def" data-pla-results-ivs-def></li>
                    <li class="pla-results-ivs-spa" data-pla-results-ivs-spa></li>
                    <li class="pla-results-ivs-spd" data-pla-results-ivs-spd></li>
                    <li class="pla-results-ivs-spe" data-pla-results-ivs-spe></li>
                </ul>
            </div>
            
            </div>
        </div>
    </template>
{% endblock %}

{% block script %}
    <script type="module" src="{{ url_for('static', filename='js/multiseed.js') }}"></script>
{% endblock %}